<!DOCTYPE html>
<html>
    <head>
        <!-- 页面meta -->
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>健康医疗</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
        <link rel="shortcut icon" href="../img/favicon.ico"/>
        <!-- 引入样式 -->
        <link rel="stylesheet" href="../css/style.css">
        <link rel="stylesheet" href="../css/orderset.css">
        <link rel="stylesheet" href="../element-ui/index.css">
        <link rel="stylesheet" href="../css/font-awesome/css/font-awesome.min.css">
    </head>
    <body class="hold-transition">
        <div id="app">
            <div class="content-header">
                <h1>预约管理<small>预约设置</small></h1>
                <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
                    <el-breadcrumb-item>首页</el-breadcrumb-item>
                    <el-breadcrumb-item>预约管理</el-breadcrumb-item>
                    <el-breadcrumb-item>预约设置</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="app-container">
                <div class="box" v-loading="loading">
                    <div class="box ordersetting">
                        <el-card class="box-card">
                            <div class="boxMain">
                                <el-button style="margin-bottom: 20px;margin-right: 20px" type="primary"
                                           @click="downloadTemplate()">模板下载
                                </el-button>
                                <el-upload action="../orderSetting/upload"
                                           name="excelFile"
                                           :show-file-list="false"
                                           :on-success="handleSuccess"
                                           :before-upload="beforeUpload">
                                    <el-button type="primary">上传文件</el-button>
                                </el-upload>
                            </div>
                            <div>
                                操作说明：请点击"模板下载"按钮获取模板文件，在模板文件中录入预约设置数据后点击"上传文件"按钮上传模板文件。
                            </div>
                        </el-card>
                        <div class="calendar">
                            <!-- 年份 月份 -->
                            <div class="month">
                                <div class="currentdate">
                                    <span class="choose-year">{{ currentYear }}年</span>
                                    <span class="choose-month">{{ currentMonth }}月</span>
                                </div>
                                <div class="choose">
                                    <span @click="goCurrentMonth(currentYear,currentMonth)" class="gotoday">今天</span>
                                    <span @click="pickPre(currentYear,currentMonth)">❮</span>
                                    <span @click="pickNext(currentYear,currentMonth)">❯</span>
                                </div>
                                <div class="clearfix"></div>
                            </div>
                            <!-- 星期 -->
                            <div class="caldate">
                                <ul class="weekdays">
                                    <li>周一</li>
                                    <li>周二</li>
                                    <li>周三</li>
                                    <li>周四</li>
                                    <li>周五</li>
                                    <li>周六</li>
                                    <li>周日</li>
                                </ul>
                                <!-- 日期 -->
                                <ul class="days">
                                    <!-- v-for循环 每一次循环用<li>标签创建一天 -->
                                    <li v-for="dayobject in days">
                                        <template>
                                            <!-- 非当前月份 -->
                                            <div class="other-month" v-if="dayobject.day.getMonth()+1 != currentMonth">
                                                {{ dayobject.day.getDate() }}
                                            </div>
                                            <!-- 当前月 -->
                                            <div class="everyday" v-if="dayobject.day.getMonth()+1 == currentMonth">
                                                <span class="datenumber">{{ dayobject.day.getDate()}}</span>

                                                <template>
                                                    <template v-for="obj in dataList">
                                                        <template v-if="obj.date == dayobject.day.getDate()">
                                                            <template v-if="obj.number > obj.reservations">
                                                                <div class="usual">
                                                                    <p>可预约{{obj.number}}人</p>
                                                                    <p>已预约{{obj.reservations}}人</p>
                                                                </div>
                                                            </template>
                                                            <template v-else>
                                                                <div class="fulled">
                                                                    <p>可预约{{obj.number}}人</p>
                                                                    <p>已预约{{obj.reservations}}人</p>
                                                                    <p>已满</p>
                                                                </div>
                                                            </template>
                                                        </template>
                                                    </template>
                                                    <button v-if="dayobject.day > today"
                                                            @click="handleOrderSet(dayobject.day)" class="orderbtn">设置
                                                    </button>
                                                </template>
                                            </div>
                                        </template>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <!-- 引入组件库 -->
    <script src="../js/vue.js"></script>
    <script src="../js/axios.min.js"></script>
    <script src="../element-ui/index.js"></script>
    <script type="text/javascript" src="../js/jquery-3.5.1.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                loading: false,//局部遮罩
                today: new Date(),//当前日期
                currentDay: 1,
                currentMonth: 1,
                LocalMonth: 1,
                currentYear: 1970,
                currentWeek: 1,
                days: [],// 日历的单元格
                dataList: []//用于装载页面显示的月份已经进行预约设置的数据
            },
            created() {//在vue初始化时调用
                this.initData(null); // 画日历
                this.findByDate(); //查询预约设置
            },
            methods: {
                //根据年月查询预约设置
                findByDate() {
                    //打开全屏遮罩
                    var fullscreenLoading = this.$loading();

                    // 获得月份 yyyy-MM
                    var date = this.currentYear + "-" + this.currentMonth;
                    var url = "../orderSetting/findByDate?date=" + date;
                    axios.get(url)
                        .then(res => {
                            if (res.data.flag) {
                                this.dataList = res.data.data;
                            } else {
                                this.$message.warning(res.data.msg);
                            }

                            //关闭全屏遮罩
                            fullscreenLoading.close();
                        })
                        .catch(error => {
                            this.$message.error("请求出错：" + error);
                            //关闭全屏遮罩
                            fullscreenLoading.close();
                        });
                },
                //预约设置
                handleOrderSet(day) {
                    this.$prompt('请输入最大可预约数', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        inputPattern: /^[1-9]\d*$/,
                        inputErrorMessage: '只能输入数字'
                    }).then(({value}) => {
                        //打开全屏遮罩
                        var fullscreenLoading = this.$loading();

                        //点击的时间
                        var dateStr = this.formatDate(day.getFullYear(), day.getMonth() + 1, day.getDate());
                        //提交的数据
                        var params = {orderDate: dateStr, number: value};
                        //提交请求
                        axios.post('../orderSetting/editNumber', params)
                            .then(res => {
                                if (res.data.flag) {
                                    this.$message.success(res.data.msg);
                                    //刷新数据
                                    this.findByDate();
                                } else {
                                    this.$message.warning(res.data.msg);
                                }

                                //关闭全屏遮罩
                                fullscreenLoading.close();
                            })
                            .catch(error => {
                                this.$message.error("请求出错：" + error);
                                //关闭全屏遮罩
                                fullscreenLoading.close();
                            });
                    }).catch(() => {
                    });
                },
                //上传之前进行文件格式校验
                beforeUpload(file) {
                    //打开遮罩
                    this.loading = true;

                    var isXLS = file.type === 'application/vnd.ms-excel';
                    if (isXLS) {
                        return true;
                    }
                    var isXLSX = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
                    if (isXLSX) {
                        return true;
                    }
                    this.$message.error('上传文件只能是xls或者xlsx格式!');
                    return false;
                },
                //下载模板文件
                downloadTemplate() {
                    window.location.href = "../template/ordersetting_template.xlsx";
                },
                //上传成功提示
                handleSuccess(res) {
                    //关闭遮罩
                    this.loading = false;

                    if (res.flag) {
                        this.$message.success(res.msg);
                        //刷新数据
                        this.findByDate();
                    } else {
                        this.$message.error(res.msg);
                    }
                },
                //初始化当前页要展示的日期, 画日历
                initData(cur) {
                    var date;
                    var index = 0;   //控制显示预定的天数
                    if (cur) {
                        date = new Date(cur);
                    } else {
                        var now = new Date();
                        var d = new Date(this.formatDate(now.getFullYear(), now.getMonth(), 1));
                        d.setDate(35);
                        date = new Date(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
                    }
                    this.currentDay = date.getDate();
                    this.currentYear = date.getFullYear();
                    this.currentMonth = date.getMonth() + 1;
                    this.currentWeek = date.getDay(); // //本月第一天是周几（周日0 周六 6）
                    var today = new Date();
                    this.LocalMonth = today.getMonth() + 1;
                    if (this.currentWeek == 0) {
                        this.currentWeek = 7;
                    }
                    var str = this.formatDate(this.currentYear, this.currentMonth, this.currentDay);
                    this.days.length = 0;
                    //周日，放在第一行第7个位置，前面6个
                    //初始化本周
                    for (var i = this.currentWeek - 1; i >= 0; i--) {
                        var d = new Date(str);
                        d.setDate(d.getDate() - i);
                        var dayobject = {};
                        dayobject.day = d;
                        var now = new Date();
                        if (d.getDate() === (now.getDate()) && d.getMonth() === now.getMonth() && d.getFullYear() === now.getFullYear()) {
                            dayobject.index = index++;//从今天开始显示供预定的数量
                        } else if (index != 0 && index < 3)
                            dayobject.index = index++;//从今天开始3天内显示供预定的数量
                        this.days.push(dayobject);//将日期放入data 中的days数组 供页面渲染使用
                    }
                    //其他周
                    for (var i = 1; i <= 35 - this.currentWeek; i++) {
                        var d = new Date(str);
                        d.setDate(d.getDate() + i);
                        var dayobject = {};//dayobject   {day:date,index:2}
                        dayobject.day = d;
                        var now = new Date();
                        if (d.getDate() === (now.getDate()) && d.getMonth() === now.getMonth() && d.getFullYear() === now.getFullYear()) {
                            dayobject.index = index++;
                        } else if (index != 0 && index < 3)
                            dayobject.index = index++;
                        this.days.push(dayobject);
                    }

                },
                //切换到当前月份
                goCurrentMonth(year, month) {
                    var d = new Date();
                    // 画日历
                    this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
                    // 加载数据库的数据
                    this.findByDate();
                },
                //向前一个月
                pickPre(year, month) {
                    var d = new Date(this.formatDate(year, month, 1));
                    d.setDate(0);
                    this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
                    // 加载数据库的数据
                    this.findByDate();
                },
                //向后一个月
                pickNext(year, month) {
                    var d = new Date(this.formatDate(year, month, 1));
                    d.setDate(35);////获取指定天之后的日期
                    this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
                    // 加载数据库的数据
                    this.findByDate();
                },
                // 返回 yyyy-MM-dd 格式的字符串
                formatDate(year, month, day) {
                    var y = year;
                    var m = month;
                    if (m < 10) m = "0" + m;
                    var d = day;
                    if (d < 10) d = "0" + d;
                    return y + "-" + m + "-" + d
                }
            }
        })
    </script>
</html>